<template>
    <div style="padding-bottom:0px;text-align:right">
        <div class="Addresssearch">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="地址">
                    <el-input v-model="formInline.Addresssearch" placeholder="地址"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <div class="" style="width: 30px"></div>
                </el-form-item>
                <el-form-item label="经度">
                    <el-input v-model="longitude1" placeholder="经度"></el-input>
                </el-form-item>
                <el-form-item label="纬度">
                    <el-input v-model="latitude1" placeholder="纬度"></el-input>
                </el-form-item>
            </el-form>
        </div>
        <div class="map" id="map-container">
            <div id="panel" v-show="dcc">
            </div>
        </div>
        <el-button type="primary" @click="confirmPos()" class="fixBtn">确定</el-button>
    </div>
</template>

<script>
    //引入高德地图
    import AMapLoader from '@amap/amap-jsapi-loader'

    window._AMapSecurityConfig = {
        securityJsCode: '8bc667f47a733d5c4031248368c46caf' //你的安全密钥
    }
    let mymap = null;
    export default {
        name: '',
        props: ['longitude', 'latitude'],
        data() {
            return {
                dcc: false,
                location: "", // input的内容
                map: null, //
                lnglat: [], // 经纬度数组 [lng,lat]
                auto: null,
                placeSearch: null,
                markers: [],
                driving: null,
                longitude1: '',
                latitude1: '',
                formInline: {
                    Addresssearch: '',
                },
            }
        },
        created() {

        },
        mounted() {
            AMapLoader.reset()
            //DOM初始化完成进行地图初始化
            this.initMap();
        },
        beforeDestroy() {
            if (!mymap) {
                return
            }
            this.latitude1 = "";
            this.longitude1 = "";
            mymap.destroy()
            mymap = null
        },

        methods: {
            initMap() {
                AMapLoader.load({
                    key: "b4dc067f2a3f52770d4c47d96a0499a9", // 申请好的Web端开发者Key，首次调用 load 时必填
                    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                    plugins: ["AMap.AutoComplete", "AMap.PlaceSearch", "AMap.Driving", "AMap.DragRoute"],
                })
                    .then((AMap) => {
                        mymap = new AMap.Map("map-container", {
                            // 设置地图容器id
                            viewMode: "2D", //  是否为3D地图模式
                            zoom: 13, // 初始化地图级别
                            center: [122.469019, 30.720894], //中心点坐标
                            resizeEnable: true,
                        });
                        // 监听鼠标点击事件
                        mymap.on("click", this.clickMapHandler);
                        // 函数调用（写入你先所需要的事件函数）
                        // this.searchMap(); // POI关键字搜索



                    })
                    .catch((e) => {
                        console.log(e);
                    });
            },
            //确定事件
            confirmPos() {
                this.$emit('getPos', {
                    lon: this.longitude1,
                    lat: this.latitude1
                })
                this.longitude1='';
                this.latitude1='';
            },
            // 点击地图事件获取经纬度，并添加标记
            clickMapHandler(e) {
                //  this.lnglat = [e.lnglat.getLng(), e.lnglat.getLat()];

                this.longitude1 = e.lnglat.getLng();
                this.latitude1= e.lnglat.getLat();
            },

            // 地图关键字查询
            onSubmit() {
                //  this.dcc = true;
                // 清除地图上所有添加的覆盖物
                mymap.clearMap();
                // 地址搜索
                if (!this.formInline.Addresssearch) return;

                let that=this;
                let placeSearch = new AMap.PlaceSearch({
                    city: '嵊泗县', // 兴趣点城市，支持城市名、citycode、adcode
                    citylimit: true, // 是否强制在设置的城市内搜索，默认false
                    // type: '', // 兴趣点类别，用‘|’分隔，默认：'餐饮服务|商务住宅|生活服务'
                    pageSize: 50, // 每页条数，默认10，范围1-50
                    pageIndex: 1, // 页码
                    // extensions: 'all', // 默认base，返回基本地址信息；all：返回详细信息
                    map:mymap, // 地图实例，可选
                    //   panel: 'panel', // 结果列表的id容器，可选
                    autoFitView: true, // 是否自动调整地图视野到marker点都处于可见范围
                })
                placeSearch.search(that.formInline.Addresssearch, function (status, result) {
                    mymap.clearMap() // 清除地图上所有添加的覆盖物
                    //  console.log(status, result)
                    // 监听鼠标点击事件
                    // mymap.on("click", this.clickMapHandlerjwd);
                    console.log(result.poiList.pois)
                    var pois = result.poiList.pois;

// 循环遍历所有点标记数组中的元素
                    for (var i = 0; i < pois.length; i++) {
                        // 创建点标记
                        var marker = new AMap.Marker({
                            position: [pois[i].location.lng,pois[i].location.lat], // 设置点标记位置
                            title: pois[i].address+pois[i].name, // 设置点标记标题
                            map: mymap // 将点标记添加到地图上
                        });

                        // 给每个点标记添加一个点击事件
                        //  let that=this;
                        marker.on("click", (e) => {
                            // 获取当前点标记的信息
                            console.log('111111111111111111',e.target._originOpts.title)
                            console.log(e.lnglat.lat,e.lnglat.lng);
                            that.longitude1=e.lnglat.lng;
                            that.latitude1=e.lnglat.lat;
                            that.$message({
                                showClose: true,
                                message: e.target._originOpts.title,
                                type: 'success'
                            });
                        });
                    }


                    //  for(var i = 0; i < pois.length; i++){
                    //      var poi = pois[i];
                    //      var marker = [];
                    //      marker[i] = new AMap.Marker({
                    //          position: poi.location,   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
                    //          title: poi.name
                    //      });
                    //      // 将创建的点标记添加到已有的地图实例：
                    //     mymap.add(marker[i]);
                    //
                    //  }
                    // // marker.on('click', this.markerClick);
                    // mymap.setFitView();
                })
            },


        },
        watch: {},

    }
</script>

<style scoped>
    #panel {
        position: absolute;
        background-color: white;
        max-height: 500px;
        overflow-y: auto;
        top: 10px;
        right: 10px;
        bottom: 0px;
        width: 280px;
        z-index: 99999;
    }

    .set .map {
        height: 600px;
    }

    #map-container {
        width: 100%;
        height: 500px;
        padding-bottom: 60px;
        position: relative;
    }

    .Addresssearch {
        height: 50px;
        width: 100%;
        background: #fff;
        padding: 5px 0 0 10px;
        margin-top:-10px;
        margin-bottom:10px;
    }

    .fixBtn {
        margin-top: 20px;
        /* bottom: 10px;
        right: 0%;
        height: 35px;
        width: 120px;
        z-index: 99; */
    }
</style>
